import { h, Component } from 'preact';
import { PropTypes } from 'react';
import { FStringPrivacy, FTimeStamp } from '~/utils/fliter';
import history from '~/core/history';
import Clip from '~/components/Clips';
import Gift from '~/components/Gift';
import PercentBox from '~/components/PercentBox';
import InviteBox from '~/components/InviteBox';
import TabContainer from '~/components/TabContainer';
import WinPrize from '~/components/WinPrize';
import ReveiceAdress from '~/components/reveiceAdress';
import Rule from '~/components/Rule';
import PayAttention from '~/components/PayAttention';
import Phone from '~/components/Phone';
import s from './style';
import classNames from 'classnames';
import MessageBox from '~/components/Message';
import { connect } from 'preact-redux';
class Home extends Component {
	constructor(props, context) {
		super(props, context);
	}
	onOpenRule = () => {
		const {dispatch} = this.props;
		dispatch({type:'openRule'});
	}
	render() {
		const { entrance, showGift, grab, prizeModal, ruleModal, addressModal, phoneModal,payAttentionModal } = this.props;
		const { recommend, user } = entrance || {};
		const { recommendTotal } = recommend || {};
		const { userPhone } = user || {};
		const { onOpenRule } = this;

		const overlayClass = classNames(s.overlay,{[s.hide]:!grab});
		const showElement = showGift ? <div className={s.shadow}>
					  <Gift />
					</div> : null;
		const clipProps = {
			grab
		};
		const winPrizeProps = {
			isOpen: prizeModal
		};
		const reveiceAdressProps = {
			isOpen: addressModal,
			userPhone
		};
		const ruleProps = {
			isOpen: ruleModal
		};
		const payAttentionProps = {
			isOpen: payAttentionModal
		};
		const phoneProps = {
			isOpen: phoneModal
		};
		const inviteBoxProps = {
			recommendTotal
		};
		const winPrizeElement = prizeModal ? <WinPrize {...winPrizeProps} /> : null;
		const ruleElement = ruleModal ? <Rule {...ruleProps} /> : null;
		const payAttentionElement = payAttentionModal ? <PayAttention {...payAttentionProps} /> : null;
		const phoneElement = phoneModal ? <Phone {...phoneProps} /> : null;
		const addressElement = addressModal ? <ReveiceAdress {...reveiceAdressProps} /> : null;
		return (
			<div className={s.root}>
			  <div className={s.main}>
				<div>
					<button className={s.rule} onClick={onOpenRule}>
						活动规则
					</button>
					<Clip {...clipProps}/>
					{showElement}
					<PercentBox />
				</div>
				<InviteBox {...inviteBoxProps}/>
				<TabContainer />
			  </div>
				{winPrizeElement}
				{ruleElement}
				{payAttentionElement}
				{phoneElement}
				{addressElement}
				<div className={overlayClass}></div>
			</div>
		);
	}
}
const mapStateToProps = (state, ownProps) => {
	return state;
};
export default connect(mapStateToProps)(Home);
